<template>
    <div id="app">

        <div title="" style="width: 70%; margin-left: auto; margin-right: auto; text-align: center; margin-top: 5.125rem;">
            <h3>{{msg}}</h3>
            <van-button v-if="flag" round block type="info" native-type="button" color="linear-gradient(to right, #ff6034, #ee0a24)"
                @click="signin()">
                点击签到
            </van-button>
        </div>
        
    </div>
</template>

<script>
    import DemoBlock from '@/components/DemoBlock.vue'
    export default {
        name: 'Signin',
        components: {
            DemoBlock
        },
        data() {
            return {
                flag: false,
                msg: ''
            }
        },
        methods: {
            signin() {
                let that = this;
                this.$axios.get('/api/signin/signIn/qrCodeSignIn/' + this.$route.params.code, {
                        Authorization: this.$store.get('state.token')
                    })
                    .then(function(response) {
                        console.log(response)
                        if (response.data.code == 200) {
                            that.$dialog.alert({
                                title: '提示',
                                message: '签到成功',
                                theme: 'round-button',
                            }).then(() => {
                                that.check();
                            });
                        } else {
                            that.$notify('其他异常签到失败');
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                        that.$notify("网络异常");
                    });
            },
            check() {
                let that = this
                this.$axios.get('/api/signin/signIn/scanQRCodeSignIn/' + this.$route.params.code, {
                        Authorization: this.$store.get('state.token')
                    })
                    .then(function(response) {
                        console.log(response)
                        if (response.data.code == 200) {
                            switch (response.data.data.reservationState) {
                                case 1:
                                    that.flag = true;
                                    that.msg = '您已预约该座位';
                                    break;
                                case 10:
                                    that.flag = false
                                    that.msg = '您已签到';
                                    break;
                                case -10:
                                    that.flag = false
                                    that.msg = '您已违约';
                                    break;
                            }
                            
                        } else {
                            that.flag = false
                            that.msg = '您尚未预约该座位'
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                        that.$notify("网络异常");
                    });
            }
        },
        created() {
            this.check();
        },
        mounted() {}
    }
</script>

<style lang="css" scoped="scoped">
    #app {
        /* background-color: #F7F8FA; */
    }
</style>
